import { useEffect, useContext, useState } from 'react'
import { Button, Space, TablePaginationConfig, Table } from 'antd';
import {} from '@ant-design/icons'
import style from './index.module.less'
import refresh from '@imgs/refresh.png'
import { getDocListRequest } from './ajax'
import { awaitWrap } from '@src/assets/js/tool'
import { CaseContext } from '../../../context'
import AddModal from './components/addModal'
import { DocumentSchema } from '@src/components/schema/document'
import { getColumns } from './util'
import { useDispatch } from 'react-redux';

async function getDocList (
  caseid: string,
  current: number,
  pageSize: number,
  setLoading: (v: boolean) => void,
  setList: (v: DocumentSchema[]) => void,
  setTotal: (v: number) => void
) {
  setLoading(true)
  const [e, d] = await awaitWrap(getDocListRequest(caseid, current, pageSize))
  setLoading(false)
  if (e === null && d !== null) {
    d.list.forEach((li, i) => {
      li.index = (current - 1) * pageSize + i + 1
    })
    setList(d.list)
    setTotal(d.total)
  }
}



function Main () {
  const c = useContext(CaseContext)
  const [loading, setLoading] = useState(false)
  const [visible, setVisible] = useState(false)
  const [list, setList] = useState<DocumentSchema[]>([])
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [total, setTotal] = useState(0)
  const [pagination, setPagination] = useState<TablePaginationConfig>({})
  const dispatch = useDispatch()
  const columns = getColumns(c.caseid, dispatch, () => { setCurrent(1); getDocList(c.caseid, 1, pageSize, setLoading, setList, setTotal) })
  useEffect(() => {
    getDocList(c.caseid, current, pageSize, setLoading, setList, setTotal)
  }, [])
  useEffect(() => {
    setPagination({
      current,
      pageSize,
      total,
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: total => `共 ${total} 条记录`,
      size: 'small'
    })
  }, [pageSize, current, total])
  return (
    <div className={style.container}>
      <AddModal visible={visible} caseid={c.caseid} hide={() => setVisible(false)} refreshFn={() => { setVisible(false); getDocList(c.caseid, current, pageSize, setLoading, setList, setTotal) }} />
      <div className={style['operate-line']}>
        <span className={style['operate-title']}>文书列表</span>
        <Space>
          <Button type='primary' onClick={() => setVisible(true)}>新增文书</Button>
          <a className={style.refresh}><img src={refresh} className={style['refresh-icon']} onClick={() => {
            setCurrent(1)
            getDocList(c.caseid, 1, pageSize, setLoading, setList, setTotal)
          }} /></a>
        </Space>
      </div>
      <div>
        <Table rowKey='id' loading={loading} columns={columns} dataSource={list} pagination={pagination} onChange={(d) => {
          setCurrent(d.current || 1)
          setPageSize(d.pageSize || 10)
          getDocList(c.caseid, d.current || 1, d.pageSize || 10, setLoading, setList, setTotal)
        }} />
      </div>
    </div>
  )
}

export default Main
